<template>
	<view class="main" v-if="loaded">
		<view>
			<view style="height: 20rpx;position: relative;z-index: 99;background: #F2F2F2;"></view>
			<view class="card">
				<!-- <view class="card-list flex flex-ai-c flex-jc-sb" v-if="isEnterprise"
					@click="getSettlementCycle" style="position:  relative;z-index: 20;">
					<view class="card-title">{{select.month?`${select.date}`:'请选择结算周期'}}</view>
					<u-icon name="arrow-down"></u-icon>
					<template v-if="show">
						<view style="position: absolute;top: 100rpx;left: 0;width: 100vw;max-height: 500rpx;overflow-x: scroll">
							<view v-for="(item,index) in dateList" :key="index">
								<view class="flex flex-ai-c flex-jc-sb" @click.stop="selectMonth(item)" style="width: 100%;padding: 30rpx;background: #fff;
								border: 1rpx solid #eee;color: #666666;box-sizing: border-box;">
									<view>{{item.month}}月份</view>
									<view>{{item.date}}</view>
								</view>
							</view>
						</view>
					</template>
				</view> -->
				<view class="card-list flex flex-ai-c">
					<view class="card-title">提现金额</view>
					<view>（余额：<text style="color: #FCB527;font-weight: bold;">{{userinfo.money}}</text>）</view>
				</view>

				<view class="card-list card-list-price flex flex-ai-c" style="padding: 0 20rpx;height: 148rpx;">
					<view style="background: rgba(238,239,240,0.3);padding: 0 40rpx;border-radius: 6rpx"
						class="flex flex-ai-c flex-jc-sb f1">
						<view class="flex flex-ai-c">
							<text style="color: #FF3B30;margin-right: 20rpx;">¥</text>
							<!-- <view v-if="isEnterprise">
								{{select.money > max_withdraw_amount ? max_withdraw_amount : select.money}}
							</view> -->
							<view>
								<u-input v-model="withdrawalMoney" type="digit" :border="false"
									:placeholder="`最低提现${min_withdraw_amount}元`"></u-input>
							</view>
						</view>
						<view style="color: #FCB527;" @click="handleAll">全部</view>
					</view>
				</view>
				
				<view class="card-list" style="height: 100%;padding: 0;" v-if="isEnterprise">
					<view class="card-title settlement">结算方式</view>
					<view style="padding: 40rpx 40rpx 30rpx 40rpx;">
						<view v-for="(item,i) in list" :key="i">
							<view class="flex flex-jc-sb" style="margin-bottom: 20rpx;">
								<view class="flex flex-ai-c">
									<view style="margin-right: 20rpx;margin-top: 12rpx;"><i-icon :icon="item.icon" size="30" />
									</view>
									<view>
										{{item.name}}
										{{item.balance?`(￥${balance})`: ''}}
									</view>
								</view>
								<radio color="rgb(252,186,13)" @click="radioChange(i)" :value="item.value" :checked="index == i">
								</radio>
							</view>
						</view>
					</view>
				</view>
				
				<view class="card-list flex flex-ai-fs flex-jc-sb" style="height: 100%;padding: 40rpx;"
					>
					<view class="card-title" style="color: #666666;font-size: 28rpx;">
						<!-- <text v-if="isEnterprise" style="color: red;">*</text> -->
						上传电子发票
						<text>（选填）</text>
					</view>
					<view class="flex flex-dir-c flex-ai-fe">
						<view @click="chooseImg">
							<i-icon icon="shanghcuan" size="100rpx" v-if="!tempFilePaths"></i-icon>
							<u-image :src="tempFilePaths" width="100rpx" height="100rpx" v-else></u-image>
						</view>
						<view style="color: #999999;font-size: 18rpx;">请上传增值税普通电子发票，支持jpg、jpeg格式</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="card-title card-list flex flex-ai-c">
					提现须知
				</view>
				<!-- <view class="card-title card-list flex flex-ai-c" v-else>
					结算须知
				</view> -->
				<view class="text">
					<rich-text user-select :nodes="incomeRule.withdrawal_notice" :selectable="true"></rich-text>
					<!-- <rich-text user-select :nodes="incomeRule.settlement_notice" :selectable="true" v-else></rich-text> -->
				</view>
			</view>
		</view>
		<view style="padding: 100rpx;">
			<ButtonConfirm myTxt="提 交" @click="withdrawal"></ButtonConfirm>
		</view>
		<view v-if="show" style="background: rgba(0,0,0,0.5);width: 100%;height: 100%;
		position: absolute;top: 0;z-index: 1;" @click="show = false"></view>
	</view>
</template>

<script>
	import common from '@/api/common.js'
	import user from '@/api/user.js'
	import ButtonConfirm from '@/components/buttonConfirm.vue'
	import {mapGetters} from 'vuex';
	export default {
		components: {
			ButtonConfirm
		},
		data() {
			return {
				show: false,
				withdrawalMoney: null,
				tempFilePaths: '',
				userinfo: {money: 0},
				dateList: [],
				select: {money: 0},
				domain_url: '',
				incomeRule: '',
				loaded: false,
				min_withdraw_amount: 1,
				max_withdraw_amount: 500,
				index: '0',
				list: [
					{
						icon: 'yue',
						name: '对公转账',
						value: '2'
					},
					{
						icon: 'weixin',
						name: '微信零钱',
						value: '1'
					}
				]
			}
		},
		onLoad() {
			this.getUserInfo()
			this.revenueRule()
		},
		computed:{
			...mapGetters(['isEnterprise'])
		},
		methods: {
			///支付切换
			radioChange(e) {
				this.index = e
			},
			async revenueRule() {
				const res = await common.revenueRule()
				this.incomeRule = res.data
				this.min_withdraw_amount = Number(res.data.min_withdraw_amount) || 1
				this.max_withdraw_amount = Number(res.data.max_withdraw_amount) || 500
			},
			async getUserInfo() {
				const res = await user.getUserInfo()
				this.userinfo = res.data
				this.userinfo.money = Number(this.userinfo.money)
				this.loaded = true;
			},
			selectMonth(item) {
				this.select = item
				this.show = false
			},
			async getSettlementCycle() {
				const res = await user.getSettlementCycle()
				if(res.data.length <= 0) return uni.showToast({
					title: '暂无周期',
					icon: 'none'
				})
				res.data.map(v => v.month = Number(v.month))
				this.dateList = res.data
				this.show = true
			},
			handleAll() {
				this.withdrawalMoney = this.userinfo.money
			},
			async withdrawal(){
				let flag = this.isEnterprise
				if(flag) {	//企业
					if(!this.userinfo.auth_name || !this.userinfo.id_number || !this.userinfo.business_image || !this.userinfo.address_detial_text) {
						uni.showModal({
							title: '信息完善',
							content: '请完善账号基本信息后申请提现',
							showCancel: false,
							confirmColor: '#FFBA2F',
							confirmText: '去填写',
							success(e) {
								uni.navigateTo({
									url: '/pages/my/personage'
								})
							}
						})
						return
					}
				}else {
					if(!this.userinfo.name || !this.userinfo.id_number || !this.userinfo.phone) {
						uni.showToast({
							title: '信息完善',
							content: '请完善账号基本信息后申请提现',
							icon: 'none',
							success: () => {
								uni.navigateTo({
									url: '/pages/my/personage'
								})
							}
						})
						return
					}
					
					this.index = '1'	//初始值为1
				}
				if((this.withdrawalMoney < this.min_withdraw_amount) || (this.withdrawalMoney > this.max_withdraw_amount)) {
					return uni.showToast({
						title: `请输入正确的提现金额范围在（${this.min_withdraw_amount} - ${this.max_withdraw_amount}）`,
						icon: 'none'
					})
				}else if(this.withdrawalMoney > this.userinfo.money) {
					return uni.showToast({
						title: `提现金额超出余额`,
						icon: 'none'
					})
				}
				/* if(this.list[this.index].value == 2) {
					return uni.showToast({
						title: `请上传电子发票`,
						icon: 'none'
					})
				} */
				// index 0对公 1微信 默认0
				const res = await user.newWithdrawal({
					// month: this.select.ok_year_month || '',
					money: this.withdrawalMoney,
					flag: flag ? this.list[this.index].value : 1,	//1个人2企业
					ticket: this.tempFilePaths,
					is_pub: Number(this.index) == 0 ? 1 : 0
					
				})
				if(res.code == 200){
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					})
					this.getUserInfo()
				}
			},
			chooseImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed', 'original'], //可以指定是原图还是压缩图，默认二者都有'original', 
					sourceType: ['album', 'original'], //从相册选择
					success: (res) => {
						this.upload(res.tempFilePaths[0])
					}
				})
			},
			// 新增图片
			async upload(files) {
				let res = await common.upload(files)
				this.tempFilePaths = res.data.domain_url
				this.domain_url = res.data.url
			},
		}
	}
</script>
<style>
	page {
		background: #F2F2F2;
	}
</style>
<style lang="scss" scoped>
	.settlement{
		padding-bottom: 40rpx;
		border-bottom: 2rpx solid #EEEFF0;
		padding: 40rpx;
	}
	.main {
		
		.card {
			background: #fff;
			.text {
				padding: 30rpx 40rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				line-height: 44rpx;
				user-select: text;
				-webkit-user-select: text
			}

			.card-list {
				padding: 0 40rpx;
				height: 108rpx;
				border-bottom: 1rpx solid #D8D8D8;
				background: #fff;

				.card-list-price {
					font-size: 32rpx;
				}
			}

			.card-title {
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
			}
		}
	}
</style>